<template>
  <div class="pubox">
      <div class="phone1">
          <van-tabs v-model="active">
                <van-tab title="全部" class="ph1">
                    <div class="nei1" v-for="(v,i) in this.$store.state.pqu" :key="i">
                        <img :src="v.imgurl">
                        <p class="nei2">{{v.nei2}}</p>
                        <p class="nei3">{{v.nei3}}</p>
                        <p class="nei4">{{v.nei4}}<span class="nei5">{{v.nei5}}</span></p>
                    </div>
                    </van-tab>


                <van-tab title="牛年限定" class="ph1">
                    <div class="nei1" v-for="(v,i) in this.$store.state.pqu2" :key="i">
                        <img :src="v.imgurl">
                        <p class="nei2">{{v.nei2}}</p>
                        <p class="nei3">{{v.nei3}}</p>
                        <p class="nei4">{{v.nei4}}<span class="nei5">{{v.nei5}}</span></p>
                    </div>
                    
                </van-tab>
                <van-tab title="黄油" class="ph1">

                    <div class="nei1" v-for="(v,i) in this.$store.state.pqu3" :key="i">
                        <img :src="v.imgurl">
                        <p class="nei2">{{v.nei2}}</p>
                        <p class="nei3">{{v.nei3}}</p>
                        <p class="nei4">{{v.nei4}}<span class="nei5">{{v.nei5}}</span></p>
                    </div>
                </van-tab>

                <van-tab title="美白"  class="ph1">
                        <div class="nei1" v-for="(v,i) in this.$store.state.pqu4" :key="i">
                        <img :src="v.imgurl">
                        <p class="nei2">{{v.nei2}}</p>
                        <p class="nei3">{{v.nei3}}</p>
                        <p class="nei4">{{v.nei4}}<span class="nei5">{{v.nei5}}</span></p>
                    </div>
                </van-tab>
            </van-tabs>
      </div>
      
      
  </div>
</template>

<script>
export default {
     data() {
        return {
            active: 2,
    };
  },
}
</script>

<style scoped>
.pubox{
    padding-bottom:0.8rem;
}
.phone1{
    margin-top:0.5rem;
    border-top:1px solid #ccc;
    
}
.ph1{
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.nei1{
    width:43%;
    height:2.2rem;
    /* background:pink; */
    margin-top:0.16rem;
    
    
}
.nei1 img{
    width:100%;
    height:1.2rem;
}
.nei2,.nei3{
    font-size:0.03rem;
}

.nei4{
    font-size:0.05rem;
}
</style>